const defExp = "[\\s,:;，：；]+"; // 默认拆分表达式
const defColumns = 8; // 默认每行列数
const defSep = ", "; // 默认间隔符
const app = Vue.createApp({
    data() {
        return {
            locale: antd.locales.zh_CN,
            formSize: "default",
            form: {
                splitExp: defExp,
                columns: defColumns,
                separator: defSep,
                itemPrefix: "",
                itemSuffix: "",
                prefix: "",
                suffix: ""
            },
            input: "", // 用户输入的内容
            output: "", // 最终处理结果
            elements: [], // 解析后的内容
            parts: [], // 分割后的内容
            textareaAutoSize: {
                minRows: 5
            }
        };
    },

    methods: {
        /**
         * 执行处理逻辑
         * @author 杨军
         * @date 2022-09-19
         */
        exec() {
            if (!this.form.splitExp) {
                this.error("请填写拆分表达式");
                return;
            }
            if (!this.input) {
                this.error("请输入待处理的内容");
                return;
            }
            this.init(); // 初始化
            this.parse(); // 解析
            if (this.elements.length <= 0) {
                this.error("未解析到有效的数据");
                return;
            }
            this.splitArray(); // 按每行列数分割
            this.merge(); // 合并分割结果
            this.copyOutput(); // 处理完成之后自动复制结果到剪切板
        },

        /**
         * 处理“执行”按钮单击事件
         * @author 杨军
         * @date 2022-09-19
         */
        handleButtonClick() {
            this.exec(); // 执行处理逻辑
        },

        /**
         * 处理下拉菜单项单击事件
         * @param {object} e 菜单属性
         * @author 杨军
         * @date 2022-09-19
         */
        handleMenuClick(e) {
            const key = parseInt(e.key);
            if (0 === key) { // 无包裹字符
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = "";
                this.form.suffix = "";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (1 === key) { // 单引号（仅包裹项目）
                this.form.itemPrefix = "'";
                this.form.itemSuffix = "'";
                this.form.prefix = "";
                this.form.suffix = "";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (2 === key) { // 双引号（仅包裹项目）
                this.form.itemPrefix = '"';
                this.form.itemSuffix = '"';
                this.form.prefix = "";
                this.form.suffix = "";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (3 === key) { // 单引号（仅包裹结果）
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = "'";
                this.form.suffix = "'";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (4 === key) { // 双引号（仅包裹结果）
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = '"';
                this.form.suffix = '"';
                this.exec(); // 执行处理逻辑
                return;
            }
            if (5 === key) { // 圆括号（仅包裹结果）
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = "(";
                this.form.suffix = ")";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (6 === key) { // 方括号（仅包裹结果）
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = "[";
                this.form.suffix = "]";
                this.exec(); // 执行处理逻辑
                return;
            }
            if (7 === key) { // 花括号（仅包裹结果）
                this.form.itemPrefix = "";
                this.form.itemSuffix = "";
                this.form.prefix = "{";
                this.form.suffix = "}";
                this.exec(); // 执行处理逻辑
                return;
            }
        },

        /**
         * 解析输入的内容
         * @author 杨军
         * @date 2022-09-19
         */
        parse() {
            const { splitExp, itemPrefix, itemSuffix } = this.form;
            this.elements = (this.input || "").trim().split(new RegExp(splitExp)) // 先拆分
                .map(item => (item || "").trim()) // 去除各项两端的空白字符
                .filter(item => item) // 只保留非空白字符串
                .map(item => `${itemPrefix}${item}${itemSuffix}`); // 给各项元素添加前缀和后缀
        },

        /**
         * 分割数组
         * @author 杨军
         * @date 2022-09-19
         */
        splitArray() {
            const { separator, columns } = this.form;
            const { elements, parts } = this;
            const len = elements.length;
            const partSize = 0 === len % columns ? len / columns : len / columns + 1; // 计算分段的数量
            for (let part = 1; part <= partSize; ++part) {
                parts.push(elements.slice(columns * (part - 1), columns * part).join(separator));
            }
        },

        /**
         * 合并分割后的结果
         * @author 杨军
         * @date 2022-09-19
         */
        merge() {
            const { separator, prefix, suffix } = this.form;
            const { parts } = this;
            this.output = `${prefix}${parts.join(`${separator}\n`)}${suffix}`;
        },

        /**
         * 复制执行结果到剪切板
         * @author 杨军
         * @date 2022-09-19
         */
        copyOutput() {
            navigator.clipboard.writeText(this.output); // 将处理结果复制到系统剪切板
            this.success("执行结果已复制到剪切板！");
        },

        /**
         * 初始化
         * @author 杨军
         * @date 2022-09-19
         */
        init() {
            this.elements = [];
            this.parts = [];
            this.output = "";
        },

        /**
         * 显示成功提示消息
         * @param {string} msg 要显示的消息
         * @author 杨军
         * @date 2022-09-19
         */
        success(msg) {
            antd.message.success(msg);
        },

        /**
         * 显示失败提示消息
         * @param {string} msg 要显示的消息
         * @author 杨军
         * @date 2022-09-19
         */
        error(msg) {
            antd.message.error(msg);
        },

        /**
         * 恢复默认拆分表达式
         * @author 杨军
         * @date 2022-09-19
         */
        recoverExp() {
            this.form.splitExp = defExp;
        }

    }
});
app.use(antd).mount("#app");
